<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- Iconos -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        body {
            background: #fff;
            font: 12px Microsoft YaHei, arial, sans-serif;
        }
        
        ul {
            list-style-type: none;
        }
        
        a {
            color: #f39800;
            text-decoration: none;
        }
        /** =======================
 * Contenedor Principal
 ===========================*/
        
        .list-title {
            display: inline-block;
            width: 100%;
            max-width: 200px;
            border-top: solid 1px #ccc;
            border-left: solid 1px #ccc;
            border-right: solid 1px #ccc;
            background: #FFF;
            text-align: center;
            height: 60px;
            line-height: 60px;
            font-size: 20px;
            color: #f39800;
            font-weight: bold;
            cursor: pointer;
        }
        
        h1 {
            color: #FFF;
            font-size: 24px;
            font-weight: 400;
            text-align: center;
            margin-top: 80px;
        }
        
        h1 a {
            color: #f39800;
            font-size: 16px;
        }
        
        .accordion {
            width: 100%;
            max-width: 200px;
            border: solid 1px #ccc;
            background: #FFF;
        }
        
        .accordion .link {
            cursor: pointer;
            display: block;
            padding: 15px 15px 15px 42px;
            color: #4D4D4D;
            font-size: 14px;
            font-weight: 700;
            border-bottom: 1px solid #CCC;
            position: relative;
            -webkit-transition: all 0.4s ease;
            -o-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
        
        .accordion li:last-child .link {
            border-bottom: 0;
        }
        
        .accordion li {
            cursor: pointer;
        }
        
        .accordion li i {
            position: absolute;
            top: 16px;
            left: 12px;
            font-size: 18px;
            color: #595959;
            -webkit-transition: all 0.4s ease;
            -o-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
        
        .accordion li i.fa-chevron-down {
            right: 12px;
            left: auto;
            font-size: 16px;
        }
        
        .accordion li.open .link {
            color: #f39800;
        }
        
        .accordion li.open i {
            color: #f39800;
        }
        
        .accordion li.open i.fa-chevron-down {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        /**
 * Submenu
 -----------------------------*/
        
        .submenu {
            display: none;
            background: #f5f5f5;
            font-size: 14px;
        }
        
        .submenu li {
            border-bottom: 1px solid #d6d7dc;
        }
        
        .submenu a {
            display: block;
            text-decoration: none;
            color: #666;
            padding: 12px;
            padding-left: 42px;
            -webkit-transition: all 0.25s ease;
            -o-transition: all 0.25s ease;
            transition: all 0.25s ease;
        }
        
        .submenu a:hover,
        .submenu li.current a {
            background: #f39800;
            color: #FFF;
        }
        /*http://www.jq22.com*/
    </style>
</head>

<body style="padding: 100px;">
    <!-- Contenedor -->

    <div class="account-l fl">
        <a class="list-title">账户概览</a>
        <ul id="accordion" class="accordion">
            <li>
                <div class="link"><i class="fa fa-leaf"></i>产品管理<i class="fa fa-chevron-down"></i></div>
                <ul class="submenu">
                    <li id="shop"><a>查看店铺</a></li>
                    <li id="publicproducts"><a>发布产品</a></li>
                    <li id="productlists"><a>查看产品</a></li>
                    <li id="mysaled"><a>已卖出产品</a></li>
                </ul>
            </li>
            <li>
                <div class="link"><i class="fa fa-shopping-cart"></i>采购管理<i class="fa fa-chevron-down"></i></div>
                <ul class="submenu">
                    <li id="publishpurchase"><a>发布采购</a></li>
                    <li id="postneeds"><a>查看采购</a></li>
                    <li id="getneeds"><a>已收到的报价单</a></li>
                    <li id="mypricesheet"><a>我的报价单</a></li>
                    <li id="concernshop"><a>已关注的店铺</a></li>
                    <li id="concerngood"><a>已关注的商品</a></li>
                </ul>
            </li>
            <li>
                <div class="link"><i class="fa fa-pencil-square-o"></i>询盘管理<i class="fa fa-chevron-down"></i></div>
                <ul class="submenu">
                    <li id="buyerxunpanlist"><a>收到的询盘</a></li>
                    <li id="publishrequire"><a>我的询盘</a></li>
                </ul>
            </li>
            <li>
                <div class="link"><i class="fa fa-file-text"></i>订单管理<i class="fa fa-chevron-down"></i></div>
                <ul class="submenu">
                    <li id="myorder"><a>我的订单</a></li>
                    <li id="myrefund"><a>退款申请</a></li>
                </ul>
            </li>
            <li>
                <div class="link"><i class="fa fa-globe"></i>金融管理<i class="fa fa-chevron-down"></i></div>
                <ul class="submenu">
                    <li id="myloan"><a>我的借贷</a></li>
                    <li id="financialmanage"><a>需求申请</a></li>
                    <li id="myapplication"><a>我的申请</a></li>
                </ul>
            </li>
            <li>
                <div class="link"><i class="fa fa-unlock-alt"></i>安全管理<i class="fa fa-chevron-down"></i></div>
                <ul class="submenu">
                    <li id="basecomInfo"><a>基本信息</a></li>
                    <li id="authenchange"><a>认证信息</a></li>
                    <li id="phoneAuth"><a>手机认证</a></li>
                    <li id="bankCardAuth"><a>银行卡认证</a></li>
                    <li id="emailAuth"><a>邮箱认证</a></li>
                    <li id="passwordmodify"><a>密码修改</a></li>
                    <li id="paymentpsdmodify"><a>支付密码</a></li>
                    <li id="address"><a>收货地址</a></li>
                </ul>
            </li>
            <li>
                <div class="link"><i class="fa fa-star"></i>评价管理<i class="fa fa-chevron-down"></i></div>
                <ul class="submenu">
                    <li id="usercomments"><a>我的评价</a></li>
                </ul>
            </li>
            <li>
                <div class="link"><i class="fa fa-bell"></i>消息管理<i class="fa fa-chevron-down"></i></div>
                <ul class="submenu">
                    <li id="mymsg"><a>我的消息</a></li>
                </ul>
            </li>
            <!-- 视情况而定 -->
            <li>
                <div class="link"><i class="fa fa-signal"></i>统计管理<i class="fa fa-chevron-down"></i></div>
                <ul class="submenu">
                    <li id="censusmanager"><a>月贸易量</a></li>
                    <li id="statisticmanager"><a>月订单量</a></li>
                </ul>
            </li>
            <li>
                <div class="link"><i class="fa fa-credit-card"></i>白条管理<i class="fa fa-chevron-down"></i></div>
                <ul class="submenu">
                    <li id="oweindex"><a>开通白条</a></li>
                    <li id="myIous"><a>我的白条</a></li>
                    <li id="louorderlist"><a>订单列表</a></li>
                </ul>
            </li>
        </ul>
        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <script src='js/leftnav.js'></script>
    </div>
</body>

</html>